<!-- 我的页面 -->
<template>
    <div>
      <reception-header/>
      <el-card shadow="hover" class="card_style">
        <div class="user_center">user/center</div>
        <div class="liner">
          <div class="dv2">
            <span>个人中心</span>
          </div>
        </div>
        <div class="main_style">
          <div class="left-menu">
            <ul>
              <li @click="toMyInfo()" 
                  :class="{active: currentUrl == clickUrl}"
              >
                  我的信息
              </li>
              <li :class="{active: currentUrl != clickUrl}" style="margin-top: 20px;" @click="toMyCollection()">我的收藏</li>
            </ul>
          </div> 
          <div class="right-content">
            <router-view></router-view>
          </div>
        </div>
      </el-card>
    </div>
</template>

<script>
import ReceptionHeader from '../../../components/ReceptionHeader.vue';
export default {
  components:{
    ReceptionHeader,
  },
  data () {
    return {
      currentUrl: "http://localhost:8080/#/reception/personalPage/myInfo",
      clickUrl: window.location.href,
    }
  },
  methods:{
    toMyInfo(){  // 去我的信息页面
      this.$router.push({path: '/reception/personalPage/myInfo'})
      this.clickUrl = window.location.href;
    },
    toMyCollection(){  // 去我的收藏页面
      this.$router.push({path: '/reception/personalPage/myCollection'})
      this.clickUrl = window.location.href;
    },
  }
}
</script>

<style scoped>
@import '../../../assets/css/reception/personalPage.css';
</style>
